<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2017-2018 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Geolocation draw</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="an OL3 interaction to draw using the GPS of your device." />
  <meta name="keywords" content="ol3, interaction, draw, GPS, location, geolocation" />

  <link rel="icon" type="image/png" href="https://openlayers.org/assets/theme/img/logo70.png" />

  <!-- android -->
  <meta name="mobile-web-app-capable" content="yes">
  <!-- iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">
  <link rel="apple-touch-icon" href="https://openlayers.org/assets/theme/img/logo70.png" />
  <link rel="apple-touch-startup-image" href="https://openlayers.org/assets/theme/img/logo70.png" />

  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
  <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
  <!meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

  <!-- Geolocation only works on https -->
  <script>
    if (location.protocol == 'http:' && !/^localhost/.test(location.host))
    {	location.href = window.location.href.replace(/^http:/,"https:");
    }
  </script>

  <link rel="stylesheet" href="../style.css" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>

  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <style>
    #map {
      position: fixed;
      top:2em;
      left:0;
      right:0;
      bottom:0;
      width:auto;
      height: auto;
      margin: 0;
    }
    h1 {
      position: fixed;
      top:0;
      left:0;
      right:0;
      height: 1em;
      font-size: 1.5em;
      padding: 0.2em 0em 0.2em 2em;
    }
    #accuracy {
      display: block;
      background: #f00;
      height:10px;
      max-width: 200px;
    }
    .options ul {
      margin:0;
    }
    .options {
      position: fixed;
      right: 0;
      bottom: 0;
      margin: 0;
      font-size: 0.8em;
      padding: 0 0.3em;
    }
    .options button {
      padding: 0.4em 0.5em;
      background: #369;
      color: #fff;
      border:0;
      margin:0.2em 0;
    }
    .info {
      background: #f5f5f5;
      padding: 0.5em;
      margin: 1em 0;
      position: fixed;
      z-index: 2;
      margin: 0.5em 0.5em 0.5em 3em;
      top: 2em;
      overflow: auto;
      max-height: calc(100% - 4em);
    }
    .follow {
      position:fixed;
      left:1em;
      bottom: 1em;
      background: #369;
      color: #fff;
      padding: 0.5em;
      display: none;
    }
  </style>

</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Geolocation draw</h1>
  </a>
  <div class="info">
    <b style="position:absolute; font-size:1.5em; font-weight:bold; right:0; top:0; padding:0.2em 0.5em; cursor:pointer;" onclick="$(this).parent().hide();">&times;</b>
    The <i>ol.interaction.GeolocationDraw</i> is a draw interaction that use an <i>ol.Geolocation</i>.
    <ul>
      <li>
        <i>setActive(bool)</i> method will start/stop the GPS and draw a location area.
      </li>
      <li>
        <i>start()</i> method will start drawing (registering poisitions).
      </li>
      <li>
        <i>pause()</i> will pause registering locations.
      </li>
      <li>
        <i>stop()</i> method will stop drawing and save the resulting feature in the provided source.
      </li>
    </ul>
    Options:
    <ul>
      <li>
        You can define a <i>minAccuracy</i> overneath the location will be skipped or a <i>condition</i> function 
        to decide if the point should be registered.
      </li>
      <li>
        You can define a <i>tolerance</i> to simplify the resulting geometry.
      </li>
      <li>
        When activated the interaction will follow the GPS position at a defined <i>zoom</i>. 
        You can override this behavior in specifying the <i>followTrack</i> option (can be true | false | auto | position | visible).
      </li>
    </ul>
  </div>

  <!-- Map div -->
  <div id="map"></div>
  <div class="follow" onclick="draw.setFollowTrack('auto');">Re-center</div>

  <div class="options" >
    <h2>Options:</h2>
    <ul>
      <li>
        <input type="radio" name="type" value="Point" /><label> Point</label>
        <input type="radio" name="type" value="LineString" checked="checked" /><label> Line</label>
        <input type="radio" name="type" value="Polygon" /><label> Polygon</label>
      </li>
      <li>
        followTrack:
        <select onchange="draw.setFollowTrack($(this).val()==='true' ? true : $(this).val());">
          <option value="true">true (track at zoom)</option>
          <option value="false">false (don't track)</option>
          <option value="auto">auto (stop on map move)</option>
          <option value="position">position (no zoom)</option>
          <option value="visible">visible (stay on	the map)</option>
        </select>
      </li>
      <li>
        <button onclick="draw.start();">start</button>
        <button onclick="draw.pause();">pause</button>
        <button onclick="draw.stop();">stop</button>
      </li>
      <li>
        Accurraty:
        <div style="border:1px solid #000; width:200px;">
          <div id="accuracy"></div>
        </div>
      </li>
      <li>
        H: <input type="text" id="heading" style="width:3em;"/>
        Z: <input type="text" id="z" style="width:3em;"/>
      </li>
    </ul>
  </div>
  

  <script type="text/javascript">
    $("label").click(function(){ $(this).prev().click(); })
    $('input[name=type]').on('change', function()
    {	draw.set("type", $(this).val());
    });

    // Layers
    var layer = new ol.layer.Tile({ source: new ol.source.OSM() });
    
    // The map
    var map = new ol.Map({
      target: 'map',
      view: new ol.View({
        zoom: 5,
        center: [261720, 5951081]
      }),
      layers: [layer]
    });

    // New vector layer
    var vector = new ol.layer.Vector({
      name: 'Vecteur',
      source: new ol.source.Vector()
    });
    map.addLayer(vector);
    
    var gauge = new ol.control.Gauge({ title:'Accurracy:', max:200 });
    map.addControl(gauge);

    // Draw interaction
    var draw = new ol.interaction.GeolocationDraw({
      source: vector.getSource(),
      zoom: 16,
      minAccuracy:10000
    });
    map.addInteraction(draw);

    draw.on("tracking", function(e) {
      $("#accuracy").width((e.geolocation.getAccuracy()));
      gauge.val(e.geolocation.getAccuracy());
      $("#heading").val(e.geolocation.getHeading());
      $("#z").val(e.geolocation.getAltitude());
    });
    //
    draw.on('follow', function(e) {
      if (e.following) $(".follow").hide();
      else $(".follow").show();
    });
    // Handle drawing
    draw.on("drawstart", function(e) {	
    });
    draw.on("drawend", function(e) {
      $(".follow").hide();
    });

  </script>

</body>
</html>
